<template>
  <div>
    <div class="page-header-wrap">
      <Header :search.sync="searchProp" @confirm="queryData" />
    </div>
    <div class="page-content-wrap">
      <a-table
        :columns="columns"
        :data-source="resState.list"
        :pagination="pageInfo"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'paymode'">
            <span>
              <a-tag v-if="record.paymode == 1" color="blue"> 线下支付 </a-tag>
              <a-tag v-else color="green">在线支付</a-tag>
            </span>
          </template>
          <template v-else-if="column.key === 'sendmode'">
            <span>
              <a-tag v-if="record.sendmode == 1" color="blue"> 店内用餐 </a-tag>
              <a-tag v-else color="green">店铺配送</a-tag>
            </span>
          </template>
          <template v-else-if="column.key === 'totalAmount'">
            ￥{{ record.totalAmount }}
          </template>
          <template v-else-if="column.key === 'sendTime'">
            {{ record.sendTime || '立即出餐' }}
          </template>
          <template v-else-if="column.key === 'action'">
            <span>
              <a-button type="link">禁用</a-button>
              <a-button type="link">编辑</a-button>
              <a-button type="link">删除</a-button>
            </span>
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script setup>
import { SmileOutlined, DownOutlined } from '@ant-design/icons-vue'
import { ref, reactive, onMounted } from 'vue'
import { selectPageList } from '@/api/user'
import { usePager } from '@/hooks'
import Header from './components/Header.vue'

const columns = [
  {
    title: '账户名',
    dataIndex: 'username',
    key: 'username',
  },
  {
    title: '电话号码',
    dataIndex: 'mobile',
    key: 'mobile',
  },
  {
    // 用户状态 0:不可用 1:正常
    title: '状态',
    dataIndex: 'status',
    key: 'status',
  },
  {
    // 用户角色 1: 普通用户 9: 管理员
    title: '角色',
    dataIndex: 'role',
    key: 'role',
  },
  {
    title: '操作',
    key: 'action',
  },
]
const { pageInfo, queryData, resState } = usePager(selectPageList)

const searchProp = reactive({})

onMounted(() => {
  queryData(searchProp)
})
</script>

<style lang="less"></style>
